<template>
  <div class="hello">
    <!-- <img :src="require('assets/images/zyy/full.png')" alt="" class="fllimg" /> -->
    <LivePlayer
      :videoUrl="getVideoUrl"
      style="width= 100%; height=100%; object-fit: fill"
      :autoplay="autoplay"
      :poster="imgurl"
      :hideFullscreenButton="false"
      :timeout="15"
      :muted="true"
      ref="player"
      @play="play"
      @pause="pause"
      :controls="controls"
      @message="playmessage"
      :alt="`<span style='font-size: 40px'>${getVideoUrl ? '' : '无信号'}</span>`"
    />
  </div>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer";
export default {
  name: "LivePlayerDemo",
  components: {
    LivePlayer,
  },
  props: {
    autoplay: {
      type: Boolean,
      default: false,
    },
    videourl: {
      type: String,
    },
    imgurl: {
      type: String,
    },
  },
  data() {
    return {
      controls: false,
    };
  },
  watch: {},
  mounted() {
    this.pause();
  },
  computed: {
    getVideoUrl() {
      return this.videourl;
    },
  },
  methods: {
    playmessage(n) {
      n.videourl = this.videourl;
      this.$emit("errorUrl", n);
      // if (n.type == "error") {
      //   this.videourl = "";
      // }
    },
    pause: function () {
      this.$refs.player.pause();
      //   this.controls = false;
    },
    play: function () {
      this.$refs.player.play();
      this.controls = true;
    },
    snap: function () {
      this.$refs.player.snap();
    },
  },
};
</script>

<style lang="scss" scoped>
.hello {
  position: relative;
}
.fllimg {
  position: absolute;
  right: 0;
  z-index: 99;
}
/deep/ .video-js .vjs-control-bar {
  height: 2vw !important;
}
</style>
